import { BasicColumn } from '/@/components/Table';
import { FormSchema } from '/@/components/Table';
import { getPlanUpdate } from '/@/api/workOffice/workOffice';
import { h, ref } from 'vue';
import { useMessage } from '/@/hooks/web/useMessage';
import { Switch } from 'ant-design-vue';
import { dateUtil as dayjs } from '/@/utils/dateUtil';

export const isChange = ref(false);
export const timeRemind = [
  {
    label: '请选择',
    value: 0,
  },
  {
    label: '十分钟',
    value: 10,
  },
  {
    label: '二十分钟',
    value: 20,
  },
  {
    label: '三十分钟',
    value: 30,
  },
  {
    label: '四十五分钟',
    value: 45,
  },
  {
    label: '一小时',
    value: 60,
  },
  {
    label: '二小时',
    value: 120,
  },
  {
    label: '三小时',
    value: 180,
  },
  {
    label: '四小时',
    value: 240,
  },
  {
    label: '五小时',
    value: 300,
  },
  {
    label: '六小时',
    value: 360,
  },
  {
    label: '十二小时',
    value: 720,
  },
];

export const columns: BasicColumn[] = [
  {
    title: '状态',
    dataIndex: 'closed',
    customRender: ({ record }: any) => {
      if (!Reflect.has(record, 'pendingStatus')) {
        record.pendingStatus = false;
      }
      const newStatus = record.closed;
      return h(Switch, {
        checked: record.closed,
        checkedChildren: '已完成',
        unCheckedChildren: '未完成',
        loading: record.pendingStatus,
        onChange(checked: boolean) {
          record.pendingStatus = true;
          isChange.value = false;
          const { createMessage } = useMessage();
          getPlanUpdate({
            ...record,
            shared: record.shared ? '1' : '0',
            isClosed: checked ? '1' : '0',
          })
            .then(() => {
              isChange.value = true;
              createMessage.success(`已成功修改状态`);
            })
            .catch(() => {
              record.closed = newStatus;
            })
            .finally(() => {
              record.pendingStatus = false;
            });
        },
      });
    },
  },
  {
    title: '日期',
    dataIndex: 'myDate',
  },
  {
    title: '标题',
    dataIndex: 'title',
  },
  {
    title: '共享',
    dataIndex: 'shared',
    customRender: ({ record }: any) => {
      if (!Reflect.has(record, 'pendingStatus')) {
        record.pendingStatus = false;
      }
      const newStatus = record.shared;
      return h(Switch, {
        checked: record.shared,
        checkedChildren: '已共享',
        unCheckedChildren: '未共享',
        loading: record.pendingStatus,
        onChange(checked: boolean) {
          record.pendingStatus = true;
          const { createMessage } = useMessage();
          getPlanUpdate({
            ...record,
            isClosed: record.closed ? '1' : '0',
            shared: checked ? '1' : '0',
          })
            .then(() => {
              isChange.value = true;
              createMessage.success(`已成功修改状态`);
            })
            .catch(() => {
              record.shared = newStatus;
            })
            .finally(() => {
              record.pendingStatus = false;
            });
        },
      });
    },
  },
  {
    title: '制定者',
    dataIndex: 'userName',
  },
];

export const searchFormSchema: FormSchema[] = [
  {
    field: 'dates',
    label: '日期区间',
    component: 'RangePicker',
    colProps: { span: 6 },
    componentProps: {
      getPopupContainer: () => document.body,
      valueFormat: 'YYYY-MM-DD',
    },
  },
  {
    field: 'isClosed',
    label: '状态',
    component: 'Select',
    colProps: { span: 6 },
    componentProps: {
      options: [
        { value: '-1', label: '不限' },
        { value: '0', label: '未完成' },
        { value: '1', label: '已完成' },
      ],
    },
  },
  {
    field: 'what',
    label: '标题',
    component: 'Input',
    colProps: { span: 6 },
  },
];

export const formSchema: FormSchema[] = [
  {
    field: 'title',
    label: '标题',
    required: true,
    component: 'Input',
    colProps: { span: 24 },
  },
  {
    field: 'dates',
    label: '时间范围',
    component: 'RangePicker',
    required: true,
    componentProps: {
      format: 'YYYY-MM-DD HH:mm:ss',
      valueForamt: 'YYYY-MM-DD HH:mm:ss',
      placeholder: ['开始时间', '结束时间'],
      showTime: { format: 'HH:mm:ss' },
      getPopupContainer: () => document.body,
    },
  },
  // {
  //   field: 'myDate',
  //   label: '开始时间',
  //   required: true,
  //   component: 'DatePicker',
  //   colProps: { span: 24 },
  //   defaultValue: dayjs().format('YYYY-MM-DD HH:mm:ss'),
  //   componentProps: {
  //     placeholder: '请选择',
  //     style: 'width:100%',
  //     showTime: true,
  //     valueForamt: 'YYYY-MM-DD HH:mm:ss',
  //     getPopupContainer: () => document.body,
  //   },
  // },
  // {
  //   field: 'endDate',
  //   label: '结束时间',
  //   component: 'DatePicker',
  //   colProps: { span: 24 },
  //   defaultValue: dayjs().format('YYYY-MM-DD HH:mm:ss'),
  //   componentProps: {
  //     placeholder: '请选择',
  //     style: 'width:100%',
  //     showTime: true,
  //     valueForamt: 'YYYY-MM-DD HH:mm:ss',
  //     getPopupContainer: () => document.body,
  //   },
  // },
  {
    field: 'closed',
    label: '是否完成',
    component: 'Switch',
    colProps: { span: 24 },
    componentProps: {
      checkedChildren: '已完成',
      unCheckedChildren: '未完成',
    },
    ifShow: false,
  },
  {
    field: 'shared',
    label: '是否共享',
    component: 'Switch',
    colProps: { span: 24 },
    componentProps: {
      checkedChildren: '是',
      unCheckedChildren: '否',
    },
  },
  {
    field: 'remind',
    label: '是否提醒',
    component: 'Switch',
    colProps: { span: 24 },
    componentProps: {
      checkedChildren: '是',
      unCheckedChildren: '否',
    },
  },
  {
    field: 'before',
    label: '提醒时间',
    component: 'Select',
    required: true,
    slot: 'before',
    colProps: { span: 24 },
    ifShow: ({ values }) => !!values.remind,
  },
  {
    field: 'give',
    label: '将日程创建给',
    component: 'Input',
    slot: 'give',
    colProps: { span: 24 },
  },
  {
    field: 'content',
    label: '内容',
    required: true,
    component: 'InputTextArea',
    colProps: { span: 24 },
    componentProps: {
      rows: 6,
    },
  },
  {
    field: 'distributer',
    label: '创建者',
    component: 'Input',
    colProps: { span: 24 },
    componentProps: {
      placeholder: '',
      rows: 6,
      readonly: true,
    },
    render: ({ model, field }) => {
      return h('span', model[field]);
    },
  },
  {
    field: 'file',
    label: '附件',
    component: 'Input',
    colProps: { span: 24 },
    slot: 'file',
  },
];

export const formSchemaInfo: FormSchema[] = [
  {
    field: 'title',
    label: '标题',
    required: true,
    component: 'Input',
    colProps: { span: 24 },
    render: ({ model, field }) => {
      return h('span', model[field]);
    },
  },
  {
    field: 'dates',
    label: '时间范围',
    component: 'RangePicker',
    required: true,
    componentProps: {
      format: 'YYYY-MM-DD HH:mm:ss',
      valueForamt: 'YYYY-MM-DD HH:mm:ss',
      placeholder: ['开始时间', '结束时间'],
      showTime: { format: 'HH:mm:ss' },
      getPopupContainer: () => document.body,
    },
    render: ({ model }) => {
      console.log('values', { model });
      return h(
        'span',
        `${
          model.dates && model.dates.length
            ? dayjs(model.dates[0]).format('YYYY-MM-DD HH:mm:ss')
            : '-'
        } / ${
          model.dates && model.dates.length
            ? dayjs(model.dates[1]).format('YYYY-MM-DD HH:mm:ss')
            : '-'
        }`,
      );
    },
  },
  {
    field: 'closed',
    label: '是否完成',
    component: 'Switch',
    colProps: { span: 24 },
    render: ({ model, field }) => {
      return h('span', `${model[field] ? '已完成' : '未完成'}`);
    },
  },
  {
    field: 'shared',
    label: '是否共享',
    component: 'Switch',
    colProps: { span: 24 },
    render: ({ model, field }) => {
      return h('span', `${model[field] ? '是' : '否'}`);
    },
  },
  {
    field: 'remind',
    label: '是否提醒',
    component: 'Switch',
    colProps: { span: 24 },
    componentProps: {
      checkedChildren: '是',
      unCheckedChildren: '否',
    },
    show: false,
  },
  {
    field: 'before',
    label: '提醒时间',
    component: 'Select',
    required: true,
    colProps: { span: 24 },
    ifShow: ({ values }) => !!values.remind,
    render: ({ model, field }) => {
      return h(
        'span',
        `${
          model[field] ? timeRemind.find((item) => item.value == model[field]).label + '之前' : ''
        }`,
      );
    },
  },
  {
    field: 'content',
    label: '内容',
    required: true,
    component: 'InputTextArea',
    colProps: { span: 24 },
    componentProps: {
      rows: 6,
    },
    render: ({ model, field }) => {
      return h('span', model[field]);
    },
  },
  {
    field: 'distributer',
    label: '创建者',
    component: 'Input',
    colProps: { span: 24 },
    componentProps: {
      placeholder: '',
      rows: 6,
      readonly: true,
    },
    render: ({ model, field }) => {
      return h('span', model[field]);
    },
  },
];
function bytesToMB(a, b = 2) {
  if (0 == a) return '0 B';
  const c = 1024,
    d = b || 2,
    e = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
    f = Math.floor(Math.log(a) / Math.log(c));
  return parseFloat((a / Math.pow(c, f)).toFixed(d)) + ' ' + e[f];
}
export const fileTyle = 'png|PNG|jpg|JPG|JPEG|jpeg|gif|GIF';
export const columnsFile: BasicColumn[] = [
  {
    title: '文件名',
    dataIndex: 'name',
    ellipsis: true,
    resizable: true,
    slots: { customRender: 'name' },
  },
  {
    title: '文件大小',
    dataIndex: 'fileSize',
    width: 130,
    ellipsis: true,
    resizable: true,
    customRender: ({ text }) => {
      if (text) {
        return bytesToMB(text);
      } else {
        return text;
      }
    },
  },
];
